@extends('user.layouts.head')
@section('content')
    <body>
    <div id="app">
        <div class="wrapper -header-fixed">

        @include('user.layouts.navbar')
        @include('user.layouts.sidebar')

        <!-- 内容页开始-->
            <div class="content-container">
                <div class="container-fluid">
                    <div class="page-content">
                        <div class="row">

                            <div class="col-xl-6">
                                <div class="chart-statistic-box">
                                    <div class="chart-txt">
                                        <div class="chart-txt-top">
                                            <p><span class="unit">¥</span><span class="number">{{ $week_sum }}</span></p>
                                            <p class="caption">本周收入</p>
                                        </div>
                                        <table class="tbl-data">
                                            <tr>
                                                <td class="price color-purple">¥ {{ $week_income }}</td>
                                                <td>收益</td>
                                            </tr>
                                            <tr>
                                                <td class="price color-yellow">¥ {{ $week_pay }}</td>
                                                <td>充值</td>
                                            </tr>
                                            <tr>
                                                <td class="price color-lime">¥ 0</td>
                                                <td>其他</td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div class="chart-container">
                                        <div class="chart-container-in">
                                            <div id="chart_div"></div>
                                            <header class="chart-container-title">收入</header>
                                            <div class="chart-container-x">
                                                <div class="item"></div>
                                                <div class="item">星期一</div>
                                                <div class="item">星期二</div>
                                                <div class="item">星期三</div>
                                                <div class="item">星期四</div>
                                                <div class="item">星期五</div>
                                                <div class="item">星期六</div>
                                                <div class="item">星期日</div>
                                                <div class="item"></div>
                                            </div>
                                            <div class="chart-container-y">
                                                <div class="item">300</div>
                                                <div class="item"></div>
                                                <div class="item">250</div>
                                                <div class="item"></div>
                                                <div class="item">200</div>
                                                <div class="item"></div>
                                                <div class="item">150</div>
                                                <div class="item"></div>
                                                <div class="item">100</div>
                                                <div class="item"></div>
                                                <div class="item">50</div>
                                                <div class="item"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div><!--.chart-statistic-box-->
                            </div><!--.col-->

                            <div class="col-xl-6">
                                <div class="row">
                                    <div class="col-sm-4">
                                        <article class="statistic-box purple">
                                            <div>
                                                <div class="number">{{ $games }}</div>
                                                <div class="caption">
                                                    <div>发布游戏 总数</div>
                                                </div>
                                                <div class="percent">
                                                    <div class="arrow up"></div>
                                                    <p>15%</p>
                                                </div>
                                            </div>
                                        </article>
                                    </div><!--.col-->
                                    <div class="col-sm-4">
                                        <article class="statistic-box red">
                                            <div>
                                                <div class="number">{{ $banner }}</div>
                                                <div class="caption">
                                                    <div>首页横幅 总数</div>
                                                </div>
                                                <div class="percent">
                                                    <div class="arrow down"></div>
                                                    <p>11%</p>
                                                </div>
                                            </div>
                                        </article>
                                    </div><!--.col-->
                                    <div class="col-sm-4">
                                        <article class="statistic-box yellow">
                                            <div>
                                                <div class="number">{{ $promotion }}</div>
                                                <div class="caption">
                                                    <div>推广游戏 总数</div>
                                                </div>
                                                <div class="percent">
                                                    <div class="arrow down"></div>
                                                    <p>5%</p>
                                                </div>
                                            </div>
                                        </article>
                                    </div><!--.col-->
                                    <div class="col-sm-4">
                                        <article class="statistic-box red">
                                            <div>
                                                <div class="number">{{ $income }}</div>
                                                <div class="caption">
                                                    <div>收入总额</div>
                                                </div>
                                                <div class="percent">
                                                    <div class="arrow up"></div>
                                                    <p>84%</p>
                                                </div>
                                            </div>
                                        </article>
                                    </div>
                                    <div class="col-sm-4">
                                        <article class="statistic-box green">
                                            <div>
                                                <div class="number">{{ $outlay }}</div>
                                                <div class="caption">
                                                    <div>支出总额</div>
                                                </div>
                                                <div class="percent">
                                                    <div class="arrow up"></div>
                                                    <p>84%</p>
                                                </div>
                                            </div>
                                        </article>
                                    </div>
                                    <div class="col-sm-4">
                                        <article class="statistic-box purple">
                                            <div>
                                                <div class="number">{{ $pay }}</div>
                                                <div class="caption">
                                                    <div>充值总额</div>
                                                </div>
                                                <div class="percent">
                                                    <div class="arrow up"></div>
                                                    <p>84%</p>
                                                </div>
                                            </div>
                                        </article>
                                    </div>
                                </div>
                            </div>

                        </div><!-- .row -->
                    </div> <!-- .page-content -->
                </div> <!-- .container-fluid -->
            </div> <!-- .content-container -->
        </div> <!-- .wrapper -->
    </div> <!-- #app -->
    <script src="{{ mix('js/app.js') }}"></script>
    <script src="{{ asset('/js/main.js') }}"></script>
    <script src="{{ asset('/js/loader.js') }}"></script>
    <script>
        $(document).ready(function () {

            google.charts.load('current', {'packages': ['corechart']});
            google.charts.setOnLoadCallback(drawChart);

            function drawChart() {
                var dataTable = new google.visualization.DataTable();
                dataTable.addColumn('string', 'Day');
                dataTable.addColumn('number', 'Values');
                // A column for custom tooltip content
                dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
                dataTable.addRows([
                    ['', 130, ' '],
                    ['星期一', 130, '130 '],
                    ['星期二', 3, '3'],
                    ['星期三', 5, '5'],
                    ['星期四', 10, '10'],
                    ['星期五', 200, '200'],
                    ['星期六', 170, '170'],
                    ['星期日', 250, '250'],
                    ['', 250, ' ']
                ]);

                var options = {
                    height: 314,
                    legend: 'none',
                    areaOpacity: 0.18,
                    axisTitlesPosition: 'out',
                    hAxis: {
                        title: '',
                        textStyle: {
                            color: '#fff',
                            fontName: 'Proxima Nova',
                            fontSize: 11,
                            bold: true,
                            italic: false
                        },
                        textPosition: 'out'
                    },
                    vAxis: {
                        minValue: 0,
                        textPosition: 'out',
                        textStyle: {
                            color: '#fff',
                            fontName: 'Proxima Nova',
                            fontSize: 11,
                            bold: true,
                            italic: false
                        },
                        baselineColor: '#16b4fc',
                        ticks: [0, 25, 50, 75, 100, 125, 150, 175, 200, 225, 250, 300, 350, 400, 450, 500],
                        gridlines: {
                            color: '#1ba0fc',
                            count: 15
                        }
                    },
                    lineWidth: 2,
                    colors: ['#fff'],
                    curveType: 'function',
                    pointSize: 5,
                    pointShapeType: 'circle',
                    pointFillColor: '#f00',
                    backgroundColor: {
                        fill: '#008ffb',
                        strokeWidth: 0,
                    },
                    chartArea: {
                        left: 0,
                        top: 0,
                        width: '100%',
                        height: '100%'
                    },
                    fontSize: 11,
                    fontName: 'Proxima Nova',
                    tooltip: {
                        trigger: 'selection',
                        isHtml: true
                    }
                };

                var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
                chart.draw(dataTable, options);
            }

            $(window).resize(function () {
                drawChart();
                setTimeout(function () {
                }, 1000);
            });
        });
    </script>

    </body>

@endsection
